<script setup lang="ts">
import SvgIcon from "@/components/common/SvgIcon.vue";
import {onMounted, ref} from "vue";
import AlbumCard from "@/components/album/AlbumCard.vue";
import {albumApi} from "@/api/blog/albumApi.ts";
import {categoryApi} from "@/api/blog/categoryApi.ts";
import router from "@/router";

const showIndex = ref(0)
const total = ref(0)
const albumList = ref([] as AlbumVO[])
const CategoryList = ref([] as Category[])
function changeIndex(id: number) {
  showIndex.value = id
  if (id === 0){
    albumApi.getAlbumPage({current:1, size:10}).then(res => {
      albumList.value = res.data.records
      total.value = res.data.total
    })
  }
  albumApi.getAlbumPage({current:1, size:10, categoryId:id}).then(res => {
    albumList.value = res.data.records
  })
}
onMounted(() => {
  categoryApi.getCategoryPage(1, 3).then(res => {
    CategoryList.value = res.data.records
    changeIndex(0)
  })
})
</script>

<template>
  <div class="album">
    <div class="album-head">
      <h1>这里是我的相册集哦</h1>
      <p>每一张照片都是一次美好的记忆。</p>
      <div class="search">
        <SvgIcon class-name="icon" icon-class="search"/>
        <input type="text" placeholder="搜索">
      </div>
    </div>
    <div class="album-content">
      <div class="album-category">
        <ul>
          <li :class="{selected: 0 === showIndex}" @click="changeIndex(0)">
            全部<span>{{ total }}</span>
          </li>
          <li v-for="item in CategoryList" :key="item.id"
              :class="{selected: item.id === showIndex}"
              @click="changeIndex(item.id)"
          >{{ item.categoryName }}<span>16</span></li>
        </ul>
      </div>
      <div class="album-list">
        <AlbumCard @click="router.push('/album/info/' + item.id)" :album="item" v-for="item in albumList"/>
      </div>
    </div>
  </div>
</template>

<style scoped lang="less">
.album {
  margin-top: -373px; /* 上移 373 像素 */
}
.album-head {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  h1{
    width: 400px;
    height: 58px;
    text-align: center;
    color: #ffffff;
    font-weight: 700;
    font-size: 40px;
    line-height: 58px;
  }
  p{
    width: 300px;
    height: 30px;
    color: #ffffff;
    font-weight: 400;
    font-size: 20px;
    line-height: 29px;
  }
  .search {
    display: flex;
    align-items: center;
    position: relative;
    margin-top: 114px;
    margin-left: auto;
    color: #fff;
    .icon {
      position: absolute;
      top: 50%;
      left: 16px;
      width: 16px;
      height: 16px;
      margin-left: 16px;
      transform: translate(-50%, -50%);
      z-index: 1;
      &:hover {
        cursor: pointer;
      }
    }
    input {
      height: 32px;
      width: 260px;
      border-radius: 8px;
      padding: 0 32px;
      margin-left: 16px;
      outline: none;
      box-sizing: border-box;
      border: 1px solid #F1F1F1;
      background-color: rgba(255, 255, 255, 0.12);
      backdrop-filter: blur(8.1px);
      &::placeholder {
        color: #F1F1F1;
      }
      &:focus {
        border: 1px solid #EB5C88;
      }
      &:hover {
        border: 1px solid #EB5C88;
      }
    }
  }
}
.album-content {
  .album-category {
    margin: 40px 0;
    height: 80px;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 0.6px 1.2px rgba(0, 0, 0, 2%), 0 1.5px 3.1px rgba(0, 0, 0, 3%), 0 3px 6.4px rgba(0, 0, 0, 4%), 0 6.2px 13.1px rgba(0, 0, 0, 5%), 0 17px 36px rgba(0, 0, 0, 7%);
    ul {
      display: flex;
      justify-content: space-between;
      list-style: none; /* 移除列表样式 */
      padding: 0 16px;
      li {
        width: 306px;
        height: 64px;
        margin: 8px 0;
        border-radius: 6px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #333333;
        font-weight: 700;
        font-size: 24px;
        line-height: 35px;
        transition: all 0.3s; // 渐变
        span {
          margin-left: 7px;
          width: 30px;
          height: 30px;
          border-radius: 50%;
          background: #EB5C88;
          color: #fff;
          font-weight: 400;
          font-size: 18px;
          text-align: center;
          line-height: 30px;
        }
        &:hover{
          cursor: pointer;
          color: #EB5C88;
        }
        &.selected {
          background: #FCEDF2;
          color: #EB5C88;
        }
      }
    }
  }
}
.album-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
@media screen and (min-width: 1600px) {
  .album-list {
    justify-content: flex-start;
    column-gap: calc(100% - 2 * 612px);
    row-gap: 20px;
  }
}
@media screen and (min-width: 2000px) {
  .album-list {
    justify-content: flex-start;
    column-gap: calc(50% - 3/2 * 612px);
    row-gap: 20px;
  }
}
@media screen and (max-width: 768px) {
  .album-list {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 15px;
  }
}
</style>
